<template>
    <div class="maxContainer content">
        <div class="formContainer">
            <el-form :inline="true" :model="extensionDataParamOrdinary" >
                <el-checkbox-group>
                    <el-form-item label="用户ID">
                        <el-input v-model="extensionDataParamOrdinary.id" placeholder="用户ID"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱">
                        <el-input v-model="extensionDataParamOrdinary.email" placeholder="邮箱"></el-input>
                    </el-form-item>
                    <el-form-item label="昵称">
                        <el-input v-model="extensionDataParamOrdinary.nickname" placeholder="昵称"></el-input>
                    </el-form-item>
                    <el-form-item label="注册时间（开始）">
                        <el-date-picker
                        v-model="extensionDataParamOrdinary.FirstTime"
                        @change="firstChange"
                        type="date"
                        placeholder="开始时间">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="注册时间（结束）">
                        <el-date-picker
                        v-model="extensionDataParamOrdinary.LastTime"
                        @change="lastChange"
                        type="date"
                        placeholder="结束时间">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="推广码">
                        <el-input v-model="extensionDataParamOrdinary.code" placeholder="推广码"></el-input>
                    </el-form-item>
                    <el-form-item label="状态" :label-width="formLabelWidth">
                        <el-select v-model="extensionDataParamOrdinary.state" placeholder="下拉选择">
                            <el-option key="" label="全部" value=""></el-option>
                            <el-option key="0" label="冻结" value="0"></el-option>
                            <el-option key="1" label="正常" value="1"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="defaultSearch()">搜索</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onDataExport">导出</el-button>
                    </el-form-item>
                </el-checkbox-group>
            </el-form>
        </div>
        <div class="tableData">
            <el-table :data="tableDataOrdinaary" border style="width: 100%">
                <el-table-column prop="id" label="用户ID" ></el-table-column>
                <el-table-column prop="createdAtStr" label="注册时间" ></el-table-column>
                <el-table-column prop="email" label="用户邮箱" ></el-table-column>
                <el-table-column prop="nickname" label="用户昵称" > </el-table-column>
                <el-table-column prop="balance" label="可用余额" > </el-table-column>
                <el-table-column prop="recharge" label="总充金额" > </el-table-column>
                <el-table-column prop="openTimes" label="开箱次数" > </el-table-column>
                <el-table-column prop="openGainLoss" label="开箱盈亏" > </el-table-column>
                <el-table-column prop="profitCallback" label="回收利润" > </el-table-column>
                <el-table-column prop="winProbability" label="出货率" > </el-table-column>
                <el-table-column prop="code" label="推广码" > </el-table-column>
                <el-table-column prop="stateName" label="状态" > </el-table-column>
                <el-table-column label="操作" >
                    <template slot-scope="scope">
                        <span class="linkBlue" @click="detailClick(scope.row)">详情</span>
                        <span class="linkBlue" @click="permissionClick(scope.row)">权限</span>
            　　　　</template>
                </el-table-column>
            </el-table>
            <el-pagination
            background
            layout="prev, pager, next"
            :page-count="extensionDataParamOrdinary.pageCount"
            @current-change="currentPageChangeOrdinary">
        </el-pagination>
        </div>

        <el-dialog title="详情" :visible.sync="detailDialog" top="5vh" @close="detailDataOrdinaaryParama={};onSearch()">
            <el-row :span="16" class="row-bg" style="margin-top: 2vh;">
                <el-col :span="12">
                    <el-form class="demo-form-inline">
                    <el-form-item label="用户ID" :label-width="formLabelWidth">
                        <el-input v-model="detailDataOrdinaaryParama.id" autocomplete="off" placeholder="用户ID" disabled=""></el-input>
                    </el-form-item>
                    </el-form>
                </el-col>
                <el-col :span="12">
                    <el-form class="demo-form-inline">
                    <el-form-item label="可用余额" :label-width="formLabelWidth">
                        <el-input v-model="detailDataOrdinaaryParama.balance" autocomplete="off" placeholder="可用余额" disabled=""></el-input>
                    </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
            <el-row :span="16" class="row-bg" style="margin-top: 2vh;">
                <el-col :span="12">
                    <el-form class="demo-form-inline">
                    <el-form-item label="注册时间" :label-width="formLabelWidth">
                        <el-input v-model="detailDataOrdinaaryParama.createdAtStr" autocomplete="off" placeholder="注册时间" disabled=""></el-input>
                    </el-form-item>
                    </el-form>
                </el-col>
                <el-col :span="12">
                    <el-form class="demo-form-inline">
                    <el-form-item label="总充值金额" :label-width="formLabelWidth">
                        <el-input v-model="detailDataOrdinaaryParama.recharge" autocomplete="off" placeholder="总充值金额" disabled=""></el-input>
                    </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
            <el-row :span="16" class="row-bg" style="margin-top: 2vh;">
                <el-col :span="12">
                    <el-form class="demo-form-inline">
                    <el-form-item label="用户昵称" :label-width="formLabelWidth">
                        <el-input v-model="detailDataOrdinaaryParama.nickname" autocomplete="off" placeholder="用户昵称" disabled=""></el-input>
                    </el-form-item>
                    </el-form>
                </el-col>
                <el-col :span="12">
                    <el-form class="demo-form-inline">
                    <el-form-item label="开箱总盈亏" :label-width="formLabelWidth">
                        <el-input v-model="detailDataOrdinaaryParama.openGainLoss" autocomplete="off" placeholder="负数代表网站亏损" disabled=""></el-input>
                    </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
            <el-row :span="16" class="row-bg" style="margin-top: 2vh;">
                <el-col :span="12">
                    <el-form class="demo-form-inline">
                    <el-form-item label="Steam交易链接" :label-width="formLabelWidth">
                        <el-input v-model="detailDataOrdinaaryParama.steamTradeUrl" autocomplete="off" placeholder="Steam交易链接" disabled=""></el-input>
                    </el-form-item>
                    </el-form>
                </el-col>
                <el-col :span="12">
                    <el-form class="demo-form-inline">
                    <el-form-item label="商城兑换金额" :label-width="formLabelWidth">
                        <el-input v-model="detailDataOrdinaaryParama.valueMallCallback" autocomplete="off" placeholder="商城兑换金额" disabled=""></el-input>
                    </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
            <el-row :span="16" class="row-bg" style="margin-top: 2vh;">
                <el-col :span="12">
                    <el-form class="demo-form-inline">
                    <el-form-item label="开箱次数" :label-width="formLabelWidth">
                        <el-input v-model="detailDataOrdinaaryParama.openTimes" autocomplete="off" placeholder="开箱次数" disabled=""></el-input>
                    </el-form-item>
                    </el-form>
                </el-col>
                <el-col :span="12">
                    <el-form class="demo-form-inline">
                    <el-form-item label="最后登录时间" :label-width="formLabelWidth">
                        <el-input v-model="detailDataOrdinaaryParama.createdAtStr" autocomplete="off" placeholder="最后登录时间" disabled=""></el-input>
                    </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
            <el-row :span="16" class="row-bg" style="margin-top: 2vh;">
                <el-col :span="12">
                    <el-form class="demo-form-inline">
                    <el-form-item label="开箱取回金额" :label-width="formLabelWidth">
                        <el-input v-model="detailDataOrdinaaryParama.limitOpenGetback" autocomplete="off" placeholder="开箱取回金额" disabled=""></el-input>
                    </el-form-item>
                    </el-form>
                </el-col>
                <el-col :span="12">
                    <el-form class="demo-form-inline">
                    <el-form-item label="推广码" :label-width="formLabelWidth">
                        <el-input v-model="detailDataOrdinaaryParama.code" autocomplete="off" placeholder="推广码" ></el-input>
                    </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
            <el-row :span="16" class="row-bg" style="margin-top: 2vh;">
                <el-col :span="12">
                    <el-form class="demo-form-inline">
                    <el-form-item label="推广总收入" :label-width="formLabelWidth">
                        <el-input v-model="detailDataOrdinaaryParama.name" autocomplete="off" placeholder="推广总收入" disabled=""></el-input>
                    </el-form-item>
                    </el-form>
                </el-col>
                <el-col :span="12">
                    <el-form class="demo-form-inline">
                    <el-form-item label="状态" :label-width="formLabelWidth">
                        <el-select v-model="detailDataOrdinaaryParama.state" @change="">
                            <el-option key="0" label="冻结" value="0"></el-option>
                            <el-option key="1" label="正常" value="1"></el-option>
                        </el-select>
                    </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
            <el-row :span="16" class="row-bg" style="margin-top: 2vh;">
                <el-col :span="12">
                    <el-form class="demo-form-inline">
                    <el-form-item :label-width="formLabelWidth">
                        
                    </el-form-item>
                    </el-form>
                </el-col>
                <el-col :span="12">
                    <el-form class="demo-form-inline">
                    <el-form-item label="回购比例" :label-width="formLabelWidth">
                        <el-input v-model="detailDataOrdinaaryParama.callbackPercent" autocomplete="off" placeholder="回购比例"></el-input>
                    </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
            <el-row :span="16" class="row-bg" style="margin-top: 2vh;">
                <el-col :span="12">
                    <el-form class="demo-form-inline">
                    <el-form-item label="推广总人数" :label-width="formLabelWidth">
                        <el-input v-model="detailDataOrdinaaryParama.inviteNum" autocomplete="off" placeholder="推广总人数" disabled=""></el-input>
                    </el-form-item>
                    </el-form>
                </el-col>
                <el-col :span="12">
                    <el-form class="demo-form-inline">
                    <el-form-item label="出货率" :label-width="formLabelWidth">
                        <el-input v-model="detailDataOrdinaaryParama.winProbability" autocomplete="off" placeholder="出货率" ></el-input>
                    </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
            <el-row :span="16" class="row-bg" style="margin-top: 2vh;">
                <el-col :span="12">
                    <el-form class="demo-form-inline">
                    <el-form-item :label-width="formLabelWidth">
                        
                    </el-form-item>
                    </el-form>
                </el-col>
                <el-col :span="12">
                    <el-form class="demo-form-inline">
                    <el-form-item label="推广比例" :label-width="formLabelWidth">
                        <el-input v-model="detailDataOrdinaaryParama.inviteReturnPercent" autocomplete="off" placeholder="推广比例" ></el-input>
                    </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
            <el-row :span="16" class="row-bg" style="margin-top: 2vh;">
                <el-col :span="12">
                    <el-form class="demo-form-inline">
                    <el-form-item label="开箱记录" :label-width="formLabelWidth">
                        <a v-bind:href="detailDataOrdinaaryParama.steamTradeUrl" >查看</a>
                    </el-form-item>
                    </el-form>
                </el-col>
                <el-col :span="12">
                    <el-form class="demo-form-inline">
                    <el-form-item label="充值记录" :label-width="formLabelWidth">
                        <a v-bind:href="detailDataOrdinaaryParama.steamTradeUrl" >查看</a>
                    </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
            <div style="margin-top: 10vh;">
                <div slot="footer" class="dialog-footer" style="margin-left: 75%;width: 200px;">
                    <el-button @click="detailDialog=false;detailDataOrdinaaryParama={}">取 消</el-button>
                    <el-button type="primary" @click="updateDataOrdinaary">确 定</el-button>
                </div>
            </div>
        </el-dialog>




        <el-dialog title="详情" :visible.sync="detailDialogPermission" top="5vh" @close="detailDataOrdinaaryParama={};onSearch()">
            <el-row :span="16" class="row-bg" style="margin-top: 2vh;">
                <el-col :span="12">
                    <el-form class="demo-form-inline">
                    <el-form-item label="用户ID" :label-width="formLabelWidth">
                        <el-input v-model="detailDataOrdinaaryParama.id" autocomplete="off" placeholder="用户ID" disabled=""></el-input>
                    </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
            <el-row :span="16" class="row-bg" style="margin-top: 2vh;">
                <el-col :span="12">
                    <el-form class="demo-form-inline">
                    <el-form-item label="用户邮箱" :label-width="formLabelWidth">
                        <el-input v-model="detailDataOrdinaaryParama.email" autocomplete="off" placeholder="用户邮箱" disabled=""></el-input>
                    </el-form-item>
                    </el-form>
                </el-col>
                <el-col :span="12">
                    <el-form class="demo-form-inline">
                        <el-form-item label="商城购买权限" :label-width="formLabelWidth">
                            <el-radio v-model="detailDataOrdinaaryParama.acMall" label="1">打开</el-radio>
                            <el-radio v-model="detailDataOrdinaaryParama.acMall" label="0">关闭</el-radio>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
            <el-row :span="16" class="row-bg" style="margin-top: 2vh;">
                <el-col :span="12">
                    <el-form class="demo-form-inline">
                    <el-form-item label="用户昵称" :label-width="formLabelWidth">
                        <el-input v-model="detailDataOrdinaaryParama.nickname" autocomplete="off" placeholder="用户昵称" disabled=""></el-input>
                    </el-form-item>
                    </el-form>
                </el-col>
                <el-col :span="12">
                    <el-form class="demo-form-inline">
                    <el-form-item label="商城购买额度" :label-width="formLabelWidth">
                        <el-input v-model="detailDataOrdinaaryParama.limitMall" autocomplete="off" placeholder="商城购买额度"></el-input>
                    </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
            <el-row :span="16" class="row-bg" style="margin-top: 2vh;">
                <el-col :span="12">
                    <el-form class="demo-form-inline">
                        <el-form-item label="充值权限" :label-width="formLabelWidth">
                            <el-radio v-model="detailDataOrdinaaryParama.acRecharge" label="1">打开</el-radio>
                            <el-radio v-model="detailDataOrdinaaryParama.acRecharge" label="0">关闭</el-radio>
                        </el-form-item>
                    </el-form>
                </el-col>
                <el-col :span="12">
                    <el-form class="demo-form-inline">
                    <el-form-item  :label-width="formLabelWidth">

                    </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
            <el-row :span="16" class="row-bg" style="margin-top: 2vh;">
                <el-col :span="12">
                    <el-form class="demo-form-inline">
                        <el-form-item label="登录权限" :label-width="formLabelWidth">
                            <el-radio v-model="detailDataOrdinaaryParama.state" label="1">正常</el-radio>
                            <el-radio v-model="detailDataOrdinaaryParama.state" label="0">冻结</el-radio>
                        </el-form-item>
                    </el-form>
                </el-col>
                <el-col :span="12">
                    <el-form class="demo-form-inline">
                        <el-form-item label="商城取回权限" :label-width="formLabelWidth">
                            <el-radio v-model="detailDataOrdinaaryParama.acMallGetback" label="1">打开</el-radio>
                            <el-radio v-model="detailDataOrdinaaryParama.acMallGetback" label="0">关闭</el-radio>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
            <el-row :span="16" class="row-bg" style="margin-top: 2vh;">
                <el-col :span="12">
                    <el-form class="demo-form-inline">
                        <el-form-item label="开箱权限" :label-width="formLabelWidth">
                            <el-radio v-model="detailDataOrdinaaryParama.acOpen" label="1">打开</el-radio>
                            <el-radio v-model="detailDataOrdinaaryParama.acOpen" label="0">关闭</el-radio>
                        </el-form-item>
                    </el-form>
                </el-col>
                <el-col :span="12">
                    <el-form class="demo-form-inline">
                    <el-form-item label="商城取回额度" :label-width="formLabelWidth">
                        <el-input v-model="detailDataOrdinaaryParama.limitMallGetback" autocomplete="off" placeholder="商城取回额度" ></el-input>
                    </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
            <el-row :span="16" class="row-bg" style="margin-top: 2vh;">
                <el-col :span="12">
                    <el-form class="demo-form-inline">
                        <el-form-item label="开箱取回权限" :label-width="formLabelWidth">
                            <el-radio v-model="detailDataOrdinaaryParama.acOpenGetback" label="1">打开</el-radio>
                            <el-radio v-model="detailDataOrdinaaryParama.acOpenGetback" label="0">关闭</el-radio>
                        </el-form-item>
                    </el-form>
                </el-col>
                <el-col :span="12">
                    <el-form class="demo-form-inline">
                    <el-form-item :label-width="formLabelWidth">

                    </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
            <el-row :span="16" class="row-bg" style="margin-top: 2vh;">
                <el-col :span="12">
                    <el-form class="demo-form-inline">
                    <el-form-item label="开箱取回额度" :label-width="formLabelWidth">
                        <el-input v-model="detailDataOrdinaaryParama.limitOpenGetback" autocomplete="off" placeholder="开箱取回额度"></el-input>
                    </el-form-item>
                    </el-form>
                </el-col>
                <el-col :span="12">
                    <el-form class="demo-form-inline">
                    <el-form-item label="操作人备注" :label-width="formLabelWidth">
                        <el-input v-model="detailDataOrdinaaryParama.remarkAdmin" type="textarea" :rows="2" placeholder="操作人备注"></el-input>
                    </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
            <div style="margin-top: 10vh;">
                <div slot="footer" class="dialog-footer" style="margin-left: 75%;width: 200px;">
                    <el-button @click="detailDialogPermission=false;detailDataOrdinaaryParama={}">取 消</el-button>
                    <el-button type="primary" @click="updateDataOrdinaary">确 定</el-button>
                </div>
            </div>
        </el-dialog>

    </div>
</template>

<script>
import api from '../../../api/Basicpath/index'
export default {
    data() {
      return {
        extensionDataParamOrdinary: {
          id: '',
          email: '',
          nickname: '',
          code: '',
          state: '',
          FirstTime: '2020/06/01',
          LastTime: '2020/06/30',
          currentPage:1,
          pageSize:3,
          pageCount:10
        },
        tableDataOrdinaary: [],
        detailDataOrdinaaryParama:{},
        formLabelWidth: '5.8vw',
        detailDialog:false,
        detailDialogPermission:false
      }
    },
    methods: {
        firstChange(firstDate){
            this.extensionDataParamOrdinary.FirstTime = this.formatDate(firstDate,'yyyy/MM/dd');
        },
        lastChange(lastDate){
            this.extensionDataParamOrdinary.LastTime = this.formatDate(lastDate,'yyyy/MM/dd');
        },
        formatDate (obj,fmt) {
            var o = {
                "M+": obj.getMonth() + 1,                 //月份
                "d+": obj.getDate(),                    //日
                "h+": obj.getHours(),                   //小时
                "m+": obj.getMinutes(),                 //分
                "s+": obj.getSeconds(),                 //秒
                "q+": Math.floor((obj.getMonth() + 3) / 3), //季度
                "S": obj.getMilliseconds()             //毫秒
            };
            if (/(y+)/.test(fmt))
                fmt = fmt.replace(RegExp.$1, (obj.getFullYear() + "").substr(4 - RegExp.$1.length));
            for (var k in o)
                if (new RegExp("(" + k + ")").test(fmt))
                    fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
            return fmt;
        },
        currentMonthLast(){
            var date=new Date();
            var currentMonth=date.getMonth();
            var nextMonth=++currentMonth;
            var nextMonthFirstDay=new Date(date.getFullYear(),nextMonth,1);
            var oneDay=1000*60*60*24;
            return new Date(nextMonthFirstDay-oneDay);
        },
        defaultSearch(){
            this.extensionDataParamOrdinary.currentPage = 1;
            this.extensionDataParamOrdinary.pageCount = 1;
            this.onSearch();
        },
        onSearch() {
            this.$axios.get(`${api}/gamemall/user/list`,this.extensionDataParamOrdinary)
				.then( res => {
				if(res.code === 200){                    
                    console.log(res.obj.list);
                    if(res.obj==null || res.obj.list==null || res.obj.list.length === 0){
                        this.extensionDataParamOrdinary.currentPage = 1;
                        this.extensionDataParamOrdinary.pageCount = 0;
                        this.tableDataOrdinaary =[];
                    }else{
                        this.tableDataOrdinaary = res.obj.list;
                        this.extensionDataParamOrdinary.pageCount = res.obj.pages;
                        for(var i =0;i<this.tableDataOrdinaary.length;i++){
                            let state= this.tableDataOrdinaary[i].state;
                            if(state==0){
                                this.tableDataOrdinaary[i].stateName = '冻结';
                            }else{
                                this.tableDataOrdinaary[i].stateName = '正常';
                            }

                            let createdAt= this.tableDataOrdinaary[i].createdAt;
                            this.tableDataOrdinaary[i].createdAtStr = this.formatDate(new Date(parseInt(createdAt)),'yyyy/MM/dd');;
                        }
                    }
				}else if(res.code === 500){
					// this.$message({
					// message: res.msg || '请求数据失败',
					// type: 'warning'
					// })
                }
				})
				.catch( err =>{
				// this.$message({
				// 	message: err.msg || '请求数据失败',
				// 	type: 'warning'
				// 	})
                }
            );
        },
        onDataExport() {

        },
        currentPageChangeOrdinary(currentPage) {
            this.extensionDataParamOrdinary.currentPage = currentPage;
            this.onSearch();
        },

        buildUpdateParam(){
            this.detailDataOrdinaaryParama.state = ""+ this.detailDataOrdinaaryParama.state +"";
            this.detailDataOrdinaaryParama.acMall = ""+ this.detailDataOrdinaaryParama.acMall +"";
            this.detailDataOrdinaaryParama.acRecharge = ""+ this.detailDataOrdinaaryParama.acRecharge +"";
            this.detailDataOrdinaaryParama.acMallGetback = ""+ this.detailDataOrdinaaryParama.acMallGetback +"";
            this.detailDataOrdinaaryParama.acOpen = ""+ this.detailDataOrdinaaryParama.acOpen +"";
            this.detailDataOrdinaaryParama.acOpenGetback = ""+ this.detailDataOrdinaaryParama.acOpenGetback +"";            

        },
        detailClick(detailDataOrdinaaryParama){
            this.detailDataOrdinaaryParama = detailDataOrdinaaryParama;
            this.buildUpdateParam();
            this.detailDialog = true;
        },
        updateDataOrdinaary(){
            this.$axios.post(`${api}/gamemall/user/update`,this.detailDataOrdinaaryParama)
            .then( res => {
            if(res.code === 200){
                this.detailDialog =false;
                this.detailDialogPermission = false;
                this.$message({
                message: '修改成功',
                type: 'warning'
                });
                this.onSearch();
            }else if(res.code === 500){
                this.$message({
                message: res.msg || '修改失败',
                type: 'warning'
                });
                this.onSearch();
            }
            })
            .catch( err =>{
            // this.$message({
            //     message: err.msg || '操作失败',
            //     type: 'warning'
            //   })
            });
        },
        permissionClick(permissionData) {
            this.detailDataOrdinaaryParama = permissionData;
            this.buildUpdateParam();
            this.detailDialogPermission = true;
        },
    },
    created:function(){
        this.onSearch();
    }
};
</script>
<style scoped>
    .content {
        width: 99%;
        height: 99%;
        display: flex;
        flex-direction: column;
        /* justify-content: center; */
        padding-top: 2%;
        margin-left: 0.5%;
        border: 1px solid #EBEEF5;
        background-color: #FFF;
        border-radius: 0.325rem;
        font-family: Avenir,Helvetica,Arial,sans-serif;
    }
    .el-form{
        text-align: left;
        margin-left: 2%;
    }
    .linkBlue{
        color: blue;
    }
    .linkBlue:hover{
        cursor:pointer
    }
</style>